<template>
  <div class="div1">
    <h2>父组件</h2>
    <span>{{ house }}</span>
    <p>
      <button @click="changeChild1Data($event, $refs)">修改组件1的数据</button>
    </p>

    <TongXin6Child1 ref="child1Ref"/>
    <TongXin6Child2 ref="child2Ref"/>

  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import TongXin6Child1 from './TongXin6Child1.vue';
import TongXin6Child2 from './TongXin6Child2.vue';
let house = ref(10)
// let child1Ref = ref<InstanceType<typeof TongXin6Child1> | null>(null)
let child1Ref = ref()
let child2Ref = ref<InstanceType<typeof TongXin6Child2> | null>(null)

function changeChild1Data(event: MouseEvent,
 refs: any) {
  if (child1Ref.value) {
    child1Ref.value.toy = '变形金刚'
    child1Ref.value.book = '红楼梦'
  }
  if (child2Ref.value) {
    child2Ref.value.toy = '钢铁侠'
    child2Ref.value.book = '水浒传'
  }
  for (let key in refs) {
    console.log('key:', key, ', value:', refs[key])
  }
}

defineExpose({
  house
})
</script>
<style lang="scss" scoped>
.div1 {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #eee;
}
</style>
